<template>
    <div class="window" style="background: none">
        <div class="title" style="background: #14274c;">
            地图标注
            <!-- <i class="el-icon-close"></i> -->
        </div>
        <div class="body">
			<div id="info">
				<div>工具栏</div>
				<button id="Extent">矩形</button>
				<button id="Circle">圆形</button>
				<button id="Polygon">多边形</button>
			</div>
			
			<div id="mapPlotting"></div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
	// import {loadModules} from 'https://js.arcgis.com/3.32/'
import {loadModules} from 'esri-loader';
	var mapPlotting, tb;
    export default {
        data () {
            return {
				// map: null,
			}
        },
		mounted() {
			loadModules(['esri/Map', 'esri/views/MapView', "esri/layers/TileLayer","esri/config", "esri/layers/FeatureLayer","esri/layers/support/Field"], {url: 'api/init.js'})
			.then(([Map, MapView,TileLayer, esriConfig, FeatureLayer,Field]) => {
			// esriConfig.portalUrl = "/proxy";
			 //  mapPlotting = new Map({
				// basemap: 'topo-vector'
			 //  });
					
			 //  this.view = new MapView({
				// container: 'mapPlotting',
				// map: mapPlotting,
				// center: [-118, 34],
				// zoom: 8
			 //  });
			  mapPlotting = new Map({
				  basemap: 'topo-vector'
			  });
			  var view = new MapView({
			      container: "mapPlotting",
			      map: mapPlotting,
			      maxZoom: 15,//地图最大缩放级别
			      minZoom: 10, //地图最小缩放级别
			      zoom: 10,
				  center: [-118, 34],
			  });
			  view.ui.remove('zoom');
			  view.ui.remove('attribution');
			  //添加到地图的地形层
			  var layer = new FeatureLayer("https://augurit.gzcc.gov.cn/server/rest/services/GZmap0304/MapServer");
			  mapPlotting.layers.add(layer);
			// var fields = [
			//   {
			//     name: "ObjectID",
			//     alias: "ObjectID",
			//     type: "oid"
			//   }, {
			//     name: "title",
			//     alias: "title",
			//     type: "string"
			//   }, {
			//     name: "type",
			//     alias: "type",
			//     type: "string"
			//   }, {
			//     name: "mag",
			//     alias: "Magnitude",
			//     type: "double"
			// }];
			// var features = [
			//  {
			//    geometry: {
			//      type: "point",
			//      x: -100,
			//      y: 38
			//    },
			//    attributes: {
			//      ObjectID: 1,
			//      DepArpt: "KATL",
			//      MsgTime: Date.now(),
			//      FltId: "UAL1"
			//    }
			//  },
			// ];
			
			// var trailheadsLayer = new FeatureLayer({
			// 	url: 'https://augurit.gzcc.gov.cn/server/rest/services/GZmap0304/MapServer',
			// 	source: features,
			// 	fields: [{
			// 	    name: "ObjectID",
			// 	    alias: "ObjectID",
			// 	    type: "oid"
			// 	  }, {
			// 	    name: "place",
			// 	    alias: "Place",
			// 	    type: "string"
			// 	  }],
			// 	  objectIdField: "ObjectID",
			// 	  geometryType: "point"
				
			// });

			// mapPlotting.add(trailheadsLayer, 1);
			// loadModules([
			// 	"esri/map", 
			// 	"esri/toolbars/draw",
			// 	"esri/symbols/SimpleMarkerSymbol", 
			// 	"esri/symbols/SimpleLineSymbol",
			// 	"esri/symbols/SimpleFillSymbol", 
			// 	"esri/symbols/CartographicLineSymbol", 
			// 	"esri/graphic", 
			// 	"esri/Color", 
			// 	"dojo/dom", 
			// 	"dojo/on", 
			// 	"dojo/domReady!"
			// ], {url: 'https://js.arcgis.com/3.32/'} ).then(([Map, Draw, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, CartographicLineSymbol, Graphic, Color, dom, on]) => {

			// 	mapPlotting = new Map("mapPlotting", {
			// 	  basemap: "streets",
			// 	  center: [-25.312, 34.307],
			// 	  slider: false,
			// 	  maxZoom: 18,//地图最大缩放级别
			// 	  minZoom: 1, //地图最小缩放级别
			// 	  logo: false,  //不显示Esri的logo
			// 	  zoom: 7
			// 	});
				
			// 	//加载地图服务
			// 	//var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
			// 	var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("https://augurit.gzcc.gov.cn/server/rest/services/GZmap0304/MapServer");
			// 	mapPlotting.addLayer(myTiledMapServiceLayer);//添加到地图中
				
			// 	mapPlotting.on("load", initToolbar);
				
			// 	var symbol = new SimpleFillSymbol(
			// 	  SimpleFillSymbol.STYLE_SOLID,
			// 	  new SimpleLineSymbol(
			// 	    SimpleLineSymbol.STYLE_SOLID,
			// 	    new Color('#000'),// 边框线条颜色
			// 	    1// 边框线条宽度
			// 	   ),
			// 		new dojo.Color([0,0,0,0.4])// 填充颜色
			// 	);
				
			// 	function initToolbar() {
			// 	  tb = new Draw(mapPlotting);
			// 	  tb.on("draw-end", addGraphic);
				
			// 	  // event delegation so a click handler is not
			// 	  // needed for each individual button
			// 	  on(dom.byId("info"), "click", function(evt) {
			// 	    if ( evt.target.id === "info" ) {
			// 	      return;
			// 	    }
			// 	    var tool = evt.target.id.toLowerCase();
			// 	    mapPlotting.disableMapNavigation();
			// 	    tb.activate(tool);
			// 	  });
			// 	}
				
			// 	function addGraphic(evt) {
			// 	  //deactivate the toolbar and clear existing graphics 
			// 	  tb.deactivate(); 
			// 	  mapPlotting.enableMapNavigation();
				
			// 	  mapPlotting.graphics.add(new Graphic(evt.geometry, symbol));
			// 	}

			}, reason => {
				console.log (reason);
			})
			
		},
		methods: {

		},
		beforeDestroy() {
		    if (this.view) {
		        // destroy the map view
		        this.view.container = null;
		    }
		},
    }
</script>
<style lang="less" rel="stylesheet/less">
	// @import "https://js.arcgis.com/4.15/esri/css/esri.css";
 //    #index section .window .body, #index section .window {
	// 	background: none!important;
	// }
#info {
	top: 30px*@ratio;
	color: #444;
	height: auto;
	font-family: arial;
	right: 20px*@ratio;
	margin: 5px*@ratio;
	padding: 10px*@ratio;
	position: absolute;
	width: 140px*@ratio;
	z-index: 99999;
	border: solid 2px*@ratio #666;
	border-radius: 4px*@ratio;
	background-color: #fff;
	font-size: 12px*@ratio;
	button { margin: 4px*@ratio; font-size: 12px*@ratio;}
		
}
#mapPlotting {
	width: 100%;
	height: 100%;
}
</style>
